<template>
    <div class="busineLst">
        <div class="busineLst_top">
            <div class="into_index">首页<i class="el-icon-close"></i></div>
            <div class="current">账号列表<i class="el-icon-close"></i></div>
        </div>
        <div class="busineLst_bottom">
            <div class="new">
                <div class="newBusiness">
                    <div class="newBusiness_btn">
                        <button @click="handerNewShop"><i class="el-icon-edit"></i>新增店铺</button>
                    </div>
                    <div class="newBusiness_serch">
                        <div class="select">
                            <div class="item">
                                <span>入驻类型</span>
                                <el-select v-model="typeValue" clearable @change="selectType" placeholder="请选择">
                                    <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="item">
                                <span>状态</span>
                                <el-select v-model="statusValue" clearable @change="selectStatus" placeholder="请选择">
                                    <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="item">
                              <span>卖场</span>
                              <el-select
                                v-model="marketId"
                                clearable
                                @change="selectMarket"
                                filterable
                                placeholder="请选择卖场"
                              >
                                <el-option
                                  v-for="item in marketList"
                                  :key="item.id"
                                  :label="item.name"
                                  :value="item.id"
                                >
                                </el-option>
                              </el-select>
                            </div>
                        </div>
                        <div class="newBusiness_serch_ipt">
                            <el-input v-model="input" clearable @input="clearInput" placeholder="请输入商品信息查询"></el-input>
                            <button @click="handerSeach"><i class="el-icon-search"></i>搜索</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="busineList_table">
                <div class="busineList_bottom_table">
                    <table>
                        <tr>
                            <th></th>
                            <th>序号</th>
                            <th>类型</th>
                            <th>负责人</th>
                            <th>手机号</th>
                            <th>入驻时间</th>
                            <th>所属卖场</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="(v,i) in tableList" :key="i">
                            <td>
                                <font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
                            </td>
                            <td>{{v.account_id}}</td>
                            <td>{{v.type_name}}</td>
                            <td>{{v.realname}}</td>
                            <td>{{v.mobile}}</td>
                            <td>{{$moment(v.create_time*1000).format('YYYY-MM-DD')}}</td>
                            <td>{{v.market_name}}</td>
                            <td>{{v.status == 1 ? '启用' : '禁用'}}</td>
                            <td>
                                <button class="editor" @click="toEdit(v.account_id)">编辑</button>
                                <button class="shelves" :class="{'delete':v.status==0}" @click="toStop(v.account_id,v.status)">{{v.status == 1 ? '禁用' : '启用'}}</button>
                            </td>
                        </tr>
                        <tr v-if="tableList.length == 0">
                            <td class="table_title" colspan="8">当前数据空空如也</td>
                        </tr>
                    </table>
                </div>
                <div class="busineList_bottom_page">
                    <div class="busineList_bottom_page_left">
                        <div class="busineList_bottom_page_left_checkAll" @click="handerCheckAll">
                            <font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
                        </div>全选
                        <!-- <button class="busineList_bottom_page_left_btn" @click="selectDel">删除</button> -->
                    </div>
                    <div class="busineList_bottom_page_right">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
                        </el-pagination>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                user_id: null, //
                tableList: [],
                input: '',
                checkAll: false,
                page: 1,
                pageSize: 10,
                total: 0,
                checkBoxAll: [], // 选中的数据
                shelvesAlls: [],

                // 入驻类型
                typeList: [{
                    label: '商家',
                    value: 'shop'
                }, {
                    label: '设计师',
                    value: 'designer_per'
                }, {
                    label: '施工队',
                    value: 'builder'
                }, {
                    label: '装修公司',
                    value: 'decoration'
                }],
                typeValue: '',

                // 申请状态
                statusList: [{
                    label: '禁用',
                    value: 0
                }, {
                    label: '正常',
                    value: 1
                }],
                statusValue: '',
                marketId: "", //卖场id
                marketList: [],
            }
        },
        mounted() {
            let user_id = localStorage.getItem('user_id')
            this.user_id = Number(user_id)
            this.getBusinessList()
            this.remoteMethod();
        },
        methods: {
            // 获取卖场列表
            remoteMethod() {
              this.$http.post("/api/root/Market/marketList").then((res) => {
                console.log(res, "卖场列表");
                if (res.code == 1) {
                  this.marketList = res.data ? res.data : [];
                }
              });
            },
            // 选择卖场
            selectMarket() {
              this.getBusinessList();
            },

            // 获取账号列表
            getBusinessList() {
                let params = {
                    user_id: this.user_id,
                    page: this.page,
                    pagesize: this.pageSize,
                    keyword: this.input,
                    type: this.typeValue,
                    status: this.statusValue,
                    market_id:this.marketId
                }
                this.$http.post('/api/root/Account/index', params).then(res => {
                    if (res.code == 1) {
                        console.log(res);
                        this.tableList = res.data.list ? res.data.list : [];
                        this.total = res.data.total
                    }
                })
            },

            // 编辑
            toEdit(id) {
                console.log(id);
                this.$router.push({ name: 'editBusiness', query: { id } })
            },

            // 清除搜索
            clearInput() {
                if (this.input == '') {
                    this.getBusinessList()
                }
            },

            //禁用与启用
            toStop(id, status) {
                let sta = status == 1 ? 0 : 1;
                this.$http.post('/api/root/Approval/accountStatus', { user_id: this.user_id, account_id: id, status: sta }).then(res => {
                    if (res.code == 1) {
                        this.getBusinessList();
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                    } else {
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        })
                    }
                })
            },

            // 选择入驻类型
            selectType() {
                this.page = 1
                this.getBusinessList()
            },

            // 选择状态
            selectStatus() {
                this.page = 1
                this.getBusinessList()
            },


            // 新增账号店铺
            handerNewShop() {
                this.$message({
                    type: 'warning',
                    message: '暂未开放'
                })
            },

            // 搜索
            handerSeach() {
                this.getBusinessList()
            },

            // 多选
            handlerCheckbox(i) {
                console.log(i);
                let arr = this.checkBoxAll;
                if (arr.includes(i)) {
                    let index = arr.indexOf(i);
                    if (index > -1) {
                        arr.splice(index, 1);
                        if (this.checkBoxAll.length !== this.tableList.length) {
                            this.checkAll = false;
                        }
                    }
                } else {
                    this.checkBoxAll.push(i);
                    if (this.checkBoxAll.length == this.tableList.length) {
                        this.checkAll = true;
                    }
                };
                this.shelvesAlls.push(this.tableList[i].product_id);
                console.log(this.shelvesAlls);
            },
            // 全选与全不选
            handerCheckAll() {
                this.checkAll = !this.checkAll;
                let arr = this.tableList.length;
                this.checkBoxAll = [];
                if (this.checkAll) {
                    for (let i = 0; i < arr; i++) {
                        this.checkBoxAll.push(i);
                    }
                } else {
                    this.checkBoxAll = [];
                }
                // 去重
                let res = this.checkBoxAll;
                for (let i = 0; i < res.length; i++) {
                    for (let j = i + 1; j < res.length; j++) {
                        if (res[i] == res[j]) {
                            res.splice(j, 1);
                            j--;
                        }
                    }
                };
                this.checkBoxAll.map(v => {
                    return this.shelvesAlls.push(this.tableList[v].store_id.toString());;
                })

                console.log(this.shelvesAlls);
            },


            //点击详情
            toDetail(id) {},

            //点击删除
            del(id) {},

            // 全选里的删除
            // selectDel(){},

            //分页
            handleSizeChange(val) {
                this.pageSize = val;
                console.log(val);
                this.getBusinessList()
            },
            handleCurrentChange(val) {
                this.page = val;
                console.log(val);
                this.getBusinessList()
            },
        }
    };
</script>

<style lang="less" scoped>
    @import "businessList.less";
</style>